<template>
    <div>
        <el-card>
            <el-button type="success" @click="dialogFormVisible = true">创建会员</el-button>
            <el-input v-model="queryForm.account" clearable placeholder="请输入用户账号 phone / email / username">
                <template #append>
                    <el-button icon="Search" @click="queryByAccount"></el-button>
                </template>
            </el-input>
            <el-table :data="tableData" border>
                <el-table-column prop="user_id" label="ID"/>
                <el-table-column prop="username" label="昵称"/>
                <el-table-column prop="password" label="密码"/>
                <el-table-column prop="email" label="邮箱"/>
                <el-table-column prop="phone" label="电话"/>
                <el-table-column prop="age" label="年龄"/>
                <el-table-column prop="birthday" label="生日"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="success" size="small" @click="queryById(scope.row.user_id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="removeById(scope.row.user_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="queryForm.pageNum" :page-size="queryForm.pageSize"
                           :page-sizes="[10, 20, 30, 40, 50, 100]" layout="->,total, sizes, prev, pager, next, jumper"
                           :total="total"
                           @size-change="handleSizeChange" @current-change="handleNumberChange"
            />
        </el-card>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加用户">
        <el-form :model="createForm" label-width="60">
            <el-form-item label="昵称">
                <el-input v-model="createForm.username" placeholder="username"/>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="createForm.email"/>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="createForm.phone"/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="createForm.password" type="password" show-password/>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="createForm.age" />
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                        v-model="createForm.birthday"
                        type="date"
                        placeholder="Pick a date"
                        :default-value="new Date(2001, 1, 1)"
                />
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="create">
              添加
            </el-button>
          </span>
        </template>
    </el-dialog>
    <el-dialog v-model="editDialogFormVisible" title="编辑用户">
        <el-form :model="editForm" label-width="60">
            <el-form-item label="昵称">
                <el-input v-model="editForm.username" placeholder="username"/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="editForm.password" placeholder="password"/>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="editForm.email"/>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="editForm.phone"/>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editForm.age"/>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                        v-model="editForm.birthday"
                        type="date"
                        placeholder="Pick a date"
                        :default-value="new Date(2001, 1, 1)"
                />
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="modify">
              保存
            </el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script setup>
import userApi from '../../api/user.js'
import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

const dialogFormVisible = ref(false)
const createForm = reactive({
    username: 'username',
    email: 'email',
    phone: 'phone',
    password: 'password',
    age: '10',
    birthday: '2001-01-01'

})
const fileList = ref([])

const type = {type: 'application/json'}

const create = async () => {


    createForm.user = new Blob([JSON.stringify(toRaw(createForm))], type)

    dialogFormVisible.value = false

    const res = await userApi.create(createForm)
    if (res.data) {
        ElMessage.success('添加成功');
        queryAll()
    } else {
        ElMessage.error('添加失败');
    }
}

// 编辑会员
const editDialogFormVisible = ref(false)
let editForm = reactive({
    user_id: '',
    username: '',
    password:'',
    email: '',
    phone: '',
    birthday:'',
    age:''

})

const editFileList = ref([])
const queryById = async (user_id) => {
    const res = await userApi.queryById({user_id: user_id})
    editForm.user_id = res.data.user_id
    editForm.username = res.data.username
    editForm.password = res.data.password
    editForm.email = res.data.email
    editForm.phone = res.data.phone
    editForm.birthday = res.data.birthday
    editForm.age = res.data.age
    editDialogFormVisible.value = true
}

const modify = async () => {

    editForm.user = new Blob([JSON.stringify(toRaw(editForm))], type);

    editDialogFormVisible.value = false

    const res = await userApi.modify(editForm)
    if (res.data) {
        ElMessage.success('编辑成功');
        queryAll()
    } else {
        ElMessage.error('编辑失败');
    }
}

// 查询

onMounted(() => {
    queryAll()
})

let tableData = ref([])
let total = ref(0)

const queryForm = reactive({
    account: '',
    pageSize: 10,
    pageNum: 1,
})

const queryAll = async () => {
    const res = await userApi.queryAll({pageNum: queryForm.pageNum, pageSize: queryForm.pageSize})
    tableData.value = res.data.list
    total.value = res.data.total
}

const handleSizeChange = (size) => {
    queryForm.pageSize = size
    queryAll()
}
const handleNumberChange = (number) => {
    queryForm.pageNum = number
    queryAll()
}

const queryByAccount = async () => {
    const res = await userApi.queryByAccount({account: queryForm.account})
    tableData.value = res.data
}

const removeById = (user_id) => {
    ElMessageBox.confirm(
        '确定删除这个会员记录吗？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await userApi.removeById({user_id: user_id})
        if (res.data) {
            ElMessage.success('删除成功')
            queryAll()
        } else {
            ElMessage.error('删除失败')
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}
</script>

<style scoped>
.el-input {
    width: 600px;
    margin-bottom: 20px;
    float: right;
}
</style>